@import '@material/fab/mixins';
@import '../mdc-helpers/mdc-helpers';

@include mdc-fab-without-ripple($query: $mat-base-styles-query);

$_mat-button-ripple-opacity: 0.1;

.mat-mdc-button {
  // The ripple element is created from the RippleRenderer rather than the MDC ripple, so it is
  // necessary to provide the color and opacity styling manually.
  .mat-ripple-element {
    opacity: $_mat-button-ripple-opacity;
    background-color: currentColor;
  }
}

// MDC expects the fab icon to contain this HTML content:
// ```html
//   <span class="mdc-fab__icon material-icons">favorite</span>
// ```
// However, Angular Material expects a `mat-icon` instead. The following
// will extend the `mdc-fab__icon` styling to the mat icon. Note that
// the extended styles inherently only match icons that nest themselves in
// a parent `mdc-fab`.
.mat-icon {
  @extend .mdc-fab__icon;
}
